<script setup>
import { ref } from 'vue';
import XScroll from './XScroll/index'
import DragSort from './DragSort/index.vue'

const cardList = ref(new Array(100))
const list = ref([
  { id: 1, name: 'item1', value: '1' },
  { id: 2, name: 'item2', value: '2' },
  { id: 3, name: 'item3', value: '3' },
  { id: 4, name: 'item4', value: '4' },
  { id: 5, name: 'item5', value: '5' },
  { id: 6, name: 'item6', value: '6' },
  { id: 7, name: 'item7', value: '7' },
])

</script>

<template>
  <div class="box-components">
    <h2>容器组件</h2>
    <h5>横向滚动</h5>
    <div class="card-container">
      <XScroll>
        <div class="card-list">
          <div class="card" v-for="(_card, key) in cardList" :key>{{ key + 1 }}</div>
        </div>
      </XScroll>
    </div>
    <h5>拖拽排序</h5>
    <DragSort v-model="list" keyPropName="value">
      <template #scope="row">
        <div class="sort-item">{{ row.name }}</div>
      </template>
    </DragSort>
  </div>
</template>

<style scoped lang="less">

.card-container {
  width: 900px;
  height: 160px;
  .card-list {
    height: 100%;
    width: 100%;
    display: flex;
      /* 如果子元素宽度总和超过父元素宽度，允许换行 */
      flex-wrap: nowrap; 

    .card {
      width: 120px;
      height: 120px;
      background-color: #099999;
      flex-shrink: 0;
      margin-right: 8px;
    }
  }
}

.sort-item {
  background-color: @theme-color;
  color: @box-text-color;
  height: 60px;
  width: 396px;
  line-height: 60px;
  text-align: center;
  border-radius: 6px;
}

</style>